<template>
	<div>
		<!-- <Header v-if="showHeader" title="费用项目"></Header> -->
		<div class="cost_item">
			<div class="basic_info">
				<van-field
					readonly
					required
					:value="selectCostItem"
					label="费用项目"
					placeholder="请选择 >"
					@click="showCostItemSelect"
				/>
				<van-action-sheet v-model="showCostItem" title="选择费用项目">
					<div class="content">
						<ul>
							<li v-for="(item,index) in costItems" :class="{active:index==isActiveCostItem}" @click="selectCostItemStyle(index)" >
								<span class="title">{{item.fd_ptim_name}}</span>
							</li>
						</ul>
					</div>
				</van-action-sheet>
				<van-field
					required
					v-model="money"
					type="number"
					label="金额"
					placeholder="请输入"
				/>
				<div class="apply_reason textarea_limit">
				    <p class="modify_title">报销事由</p>
				    <van-cell-group>
				        <van-field 
				        type="textarea" 
				        rows="5"
				        autosize 
				        v-model="applyReason" 
				        maxlength="200"
				        show-word-limit
				        placeholder="报销事由不能超过200字" />
				    </van-cell-group>
				</div>
			</div>
			<van-tabbar :z-index="1000">
			    <van-tabbar-item>
							<!-- <van-button size="large" @click="submitButton" :disabled="money.length<=0|| !money">确定</van-button> -->
							<van-button size="large" @click="submitButton">确定</van-button>
			    </van-tabbar-item>
			</van-tabbar>
		</div>
		<!-- <Loading v-show="showLoading"></Loading> -->
	</div>
</template>

<script>
	import { feeSubjectList } from "@/request/api.js";
	// import Loading from "@/components/Loading.vue";
	// import Header from "@/components/Header.vue";
	import axios from 'axios';
	import eventBus from '@/utils/eventBus.js';
	export default {
		name:'finCostItem',
		data(){
			return {
				// showHeader:this.$store.state.showHeader,
				// showLoading:false,
				//标签
					selectCostItem:'',
					selectCostItemId:'',
					showCostItem:false,
					isActiveCostItem:0,
					costItems:[],
					money:'',
					applyReason:'',
					allCostItems:[],
					allCostItemsEdit:[],
					// approveEdit:''
			}
		},
    // components:{
    //     Loading,
    //     Header
    // },
		mounted() {
			// this.approveEdit = this.$route.query.name;
			// console.log(this.approveEdit);
		},
		methods:{
		 showCostItemSelect(){
			 this.showCostItem = true;
			 feeSubjectList({token:this.$store.state.token,page:1,per_page:0}).then(res=>{
			 	// 请求的列表数据 
			 	let costItemArr = res.data.data;
			 	this.costItems  = costItemArr;
				// console.log(res,'res');
			 }).catch((e)=>{
			 	console.log(e);
			 	// this.showLoading = false;
			 })
		 },
			//选择费用项目
		 selectCostItemStyle(index) {
			 this.isActiveCostItem=index;
			 this.selectCostItem = this.costItems[index].fd_ptim_name;
			 this.selectCostItemId = this.costItems[index].fd_ptim_id;
			 this.showCostItem = false;
　　　 },
		 //确定按钮
		 submitButton(){
					// this.showLoading = true;
					if(this.selectCostItem !=='' && this.money !==''){
						this.allCostItems=sessionStorage.allCostItems?JSON.parse(sessionStorage.allCostItems):[];
						this.money = parseFloat(this.money).toFixed(2);
						this.allCostItems.push(
							{
								id:this.selectCostItemId,
								index:this.allCostItems.length,
								type:this.selectCostItem,
								money:this.money,
								remark:this.applyReason,
							}
						)
						sessionStorage.setItem("allCostItems", JSON.stringify(this.allCostItems));
						eventBus.$emit("allCostItems",this.allCostItems);
						this.$parent.$parent.ishidePop();
						this.selectCostItem='';
						this.money='';
						this.applyReason='';
					} 
					else {
						this.$parent.$parent.ishidePop();
					}
			}
		}
	}
</script>

<style lang="less" scoped>
	.cost_item{
		.basic_info {
			line-height: 36px;
			background-color: #fff;
			border-bottom: 1px solid #f7f7f7;
			font-size: 14px;
			color: #999;
			box-sizing: border-box;
			/deep/ .van-field__label {
				color: #151617;
			}
			/deep/ .van-field__control {
				text-align: right;
			}
			/deep/ .van-popup {
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
			}
			/deep/ .van-cell--required::before {
				left: 15px !important;
			}
			/deep/ .van-cell--required {
				padding-left: 23px;
			}
			.content ul {
				li {
					padding: 10px 20px;
					font-size: 14px;
					border-bottom: 1px solid #f7f7f7;
					span{
						width: 100%;
						display: block;
						line-height: 28px;
						color:#747577;
					}
					.title{
						color: #334545;
					}
				}
				li.active {
					background-color: #33cccc;
				}
				li.unactive{
					background-color: #fff;
				}
			}
		}
		.apply_reason{
		    width: 100%;
		    height: auto;
		    background: #fff;
		    margin-top: 10px;
		    padding: 10px 15px;
		    box-sizing: border-box;
		    color: #151617;
		    font-size: 14px;
		    p{
		        line-height: 36px;
		        font-weight: bold;
		    }
		    .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{border: none;}
		    .van-cell{padding: 0;font-size: 14px;color: #999;}
		}
		.modify_title {
			font-weight: 500 !important;
			color:#151617 !important;
		}
		.textarea_limit {
			margin-top: 0;
			/deep/ .van-field__control {
				height: 120px !important;
				overflow: auto;
				text-align: left;
			}
		}
		.red{
			color: red !important;
		}
		/deep/ .van-tabbar-item__text{
		    display: block;
		    width: 100%;
		}
		/deep/ .van-button--large{
				width: 100%;
		    font-size: 16px;
		    font-weight: bold;
		    background-color: #02ccbd;
		    color: #fff;
		}
		
		.van-popup {
			height: 300px;
			overflow: hidden;
			.van-action-sheet__content {
				height: 255px;
				overflow: auto;
			}
		}
	}
	
</style>
